<template>
    <div>
        <PageHeader class="product_tabs" hidden-breadcrumb>
            <div slot="title">
                <router-link :to="{path:'/admin/marketing/cloud_live/live_room'}"><Button icon="ios-arrow-back" size="small"  class="mr20">返回</Button></router-link>
                <span v-text="$route.meta.title" class="mr20"></span>
            </div>
        </PageHeader>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition" class="tabform" @submit.native.prevent>
                <Row :gutter="24" type="flex">
                    <Col span="24">
                        <FormItem label="直播间名称：">
                            <Input enter-button  placeholder="请输入直播间名称" element-id="title" v-model="formValidate.title" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="直播间公告：">
                            <Input enter-button  placeholder="请输入直播间公告" element-id="notice" v-model="formValidate.notice" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="直播间链接：">
                            <Input enter-button  placeholder="直播间链接" element-id="play_link" v-model="formValidate.play_link" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <div style="display: flex">
                            <FormItem label="列表页图：">
                                <div @click="modalPicTap(0)" class="box">
                                    <img :src="formValidate.cover_img" alt="" v-if="formValidate.cover_img">
                                    <div class="upload-box" v-else><Icon type="ios-camera-outline" size="36" /></div>
                                </div>
                            </FormItem>
                            <span style="margin-left: 20px;color:#b0bac5;">尺寸：340*250px</span>
                        </div>

                    </Col>
                    <Col span="24">
                        <div style="display: flex">
                            <FormItem label="详情页头图：">
                                <div @click="modalPicTap(1)" class="box">
                                    <img :src="formValidate.thumb" alt="" v-if="formValidate.thumb">
                                    <div class="upload-box" v-else><Icon type="ios-camera-outline" size="36" /></div>
                                </div>
                            </FormItem>
                            <span style="margin-left: 20px;color:#b0bac5;">尺寸：750*650px</span>
                        </div>
                    </Col>
                    <Col span="24">
                        <div style="display: flex">
                            <FormItem label="直播简介图：">
                                <div @click="modalPicTap(2)" class="box">
                                    <img :src="formValidate.remark" alt="" v-if="formValidate.remark">
                                    <div class="upload-box" v-else><Icon type="ios-camera-outline" size="36" /></div>
                                </div>
                            </FormItem>
                            <span style="margin-left: 20px;color:#b0bac5;">尺寸：750*自由高度</span>
                        </div>
                    </Col>
                    <Col span="24">
                        <div style="display: flex">
                            <FormItem label="分享海报图：">
                                <div @click="modalPicTap(3)" class="box">
                                    <img :src="formValidate.poster_img" alt="" v-if="formValidate.poster_img">
                                    <div class="upload-box" v-else><Icon type="ios-camera-outline" size="36" /></div>
                                </div>
                            </FormItem>
                            <span style="margin-left: 20px;color:#b0bac5;">尺寸：750*1500px</span>
                        </div>
                    </Col>
                    <Col span="24">
                        <FormItem label="AppID：">
                            <Input enter-button  placeholder="请输入直播小程序的AppID" element-id="appid" v-model="formValidate.appid" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="AppUrl：">
                            <Input enter-button  placeholder="请输入直播小程序的AppUrl" element-id="app_url" v-model="formValidate.app_url" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="目标总金额：">
                            <Input type="number" enter-button  placeholder="0" element-id="pay_price" v-model="formValidate.pay_price" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="目标订单数：">
                            <Input type="number" enter-button  placeholder="0" element-id="pay_num" v-model="formValidate.pay_num" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="直播开始时间：">
                            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" style="width: 300px" :value="formValidate.start_time" @on-change="selectDate"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="直播结束时间：">
                            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" style="width: 300px" :value="formValidate.end_time" @on-change="selectDate2"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="浏览量：">
                            <Input type="number" enter-button  placeholder="0" element-id="visit" v-model="formValidate.visit" style="width: 300px;"/>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="排序：">
                            <Input type="number" enter-button  placeholder="0" element-id="sort" v-model="formValidate.sort" style="width: 300px;"/>
                        </FormItem>
                    </Col>

                </Row>
                <Row :gutter="24" type="flex">
                    <Col v-bind="grid" span="24">
                        <Button type="primary" @click="handleSubmit('formItem')" style="width:19%;margin-left: 99px;">提交</Button>
                    </Col>
                </Row>
            </Form>
        </Card>
        <div>
            <Modal v-model="modalPic" width="800px" scrollable  footer-hide closable title='上传商品图' :mask-closable="false" :z-index="1">
                <uploadPictures :isChoice="isChoice" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic" v-if="modalPic"></uploadPictures>
            </Modal>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import uploadPictures from '@/components/uploadPictures';
    import {liveDetail,liveAdd, liveAuchorList } from '@/api/cloudlive'
    export default {
        name: "creat_live",
        components: {
            uploadPictures
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 100;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        data(){
            return {
                grid: {
                    xl: 10,
                    lg: 16,
                    md: 18,
                    sm: 24,
                    xs: 24
                },
                formValidate:{
                    id:'',
                    title:'',
                    notice:'',
                    cover_img:'',
                    thumb:'',
                    remark:'',
                    poster_img:'',
                    appid:'wxc6ecd3e773e4bfe5',
                    app_url:'',
                    start_time:'',
                    end_time:'',
                    /******************/
                    visit:'',
                    sort:'',
                    pay_price:'',
                    pay_num:'',
                    play_link:'',
                },
                timeVal:'',
                timeVal2:'',
                modalPic: false,
                isChoice: '单选',
                activeIndex:0,
                liveList: []
            }
        },
        created(){
            let id = this.$route.query.id;
            if(id){
                liveDetail(id).then(res=>{
                    this.formValidate.id = id;
                    this.formValidate.title = res.data.title;
                    this.formValidate.notice = res.data.notice;
                    Object.assign(this.formValidate,res.data);
                    this.$forceUpdate();
                })
            }
        },
        mounted(){

        },
        methods:{
            anchorName (e) {
                this.liveList.filter((el,index)=>{
                    if(el.wechat === e){
                        this.formValidate.anchor_name = el.name
                    }
                });
            },
            // 点击图文封面
            modalPicTap (type) {
                this.activeIndex = type
                this.modalPic = true;
            },
            // 选择日期
            selectDate(e){
                this.formValidate.start_time = e;
            },
            selectDate2(e){
                this.formValidate.end_time = e;
            },
            // 获取图片信息
            getPic (pc) {
                this.$nextTick(() => {
                    if(this.activeIndex == 0){
                        this.formValidate.cover_img = pc.att_dir;
                    }else if(this.activeIndex == 1){
                        this.formValidate.thumb = pc.att_dir;
                    }else if(this.activeIndex == 2){
                        this.formValidate.remark = pc.att_dir;
                    }else if(this.activeIndex == 3){
                        this.formValidate.poster_img = pc.att_dir;
                    }
                    this.modalPic = false;
                })
            },
            // 保存
            handleSubmit(name){
                let start_time = this.formValidate.start_time;
                let end_time = this.formValidate.end_time;
                if(start_time>=end_time){
                    return this.$Message.error('直播开始时间不能大于结束时间');
                }
                let live_time = [start_time,end_time];
                let ajaxData = Object.assign({},this.formValidate,{start_time:live_time});
                liveAdd(ajaxData).then(res=>{
                    this.$Message.success(res.msg);
                    setTimeout(() => {
                        this.$router.push({ path: '/admin/marketing/cloud_live/live_room' });
                    }, 500);
                }).catch(error=>{
                    console.info(error,444)
                    //this.$Message.error(error.msg)
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .QRpic {
        width: 180px;
        height: 180px;

        img {
            width: 100%;
            height: 100%;
        }
    }
    .upload-box
        display flex
        align-items center
        justify-content center
        width 60px
        height 60px
        background #ccc
    .box
        width 60px
        height 60px
        margin-bottom 10px
        img
            width 100%
            height 100%
</style>
